<!DOCTYPE HTML>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/swiper-3.4.2.min.css"/>
    <link rel="stylesheet" href="../css/article.css"/>
</head>
<body>

<div id="menu-container"></div>

<div class="swiper-container">
    <div id="article" class="swiper-wrapper">
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>


<script type="text/javascript" src="../js/requirejs/2.1.14/require.js"></script>
<script type="text/javascript">
    function loadCss(url) {
        var link = document.createElement("link");
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = url;
        document.getElementsByTagName("head")[0].appendChild(link);
    }

    require.config({
        baseUrl: '../js/',
        paths: {
            'Zepto': 'zepto/zepto',
            "Swiper": 'swiper/swiper.jquery'
        },
        shim: {
            'Zepto': {
                exports: '$'
            },
            'Swiper': {
                deps: ['Zepto'],//依赖
                exports: 'Swiper'
            }
        }
    });


    define('main', function (require) {
        var $ = require('Zepto');

        var klass = require('base/klass');
        var FontStyleController = require('app/FontStyleController');
        var renderPage = require('app/renderPage');

        function main() {
            var $article = $('#article');
            var fontStyleController = new FontStyleController();
            var fontStyle = ['small', 'normal', 'big'];

            $.ajax({
                url: '../data/0',
                type: 'get',
                dataType: 'text',
                success: function (data) {
                    fontStyleController.set(fontStyle[Math.floor(Math.random() * 3)]);
                    var htmlStr = renderPage({
                        article: data,
                        pageClass: "swiper-slide article_page",
//                        pageClass: "article_page",
                        fontStyleStatus: fontStyleController.getStatus()
                    });
                    $article.css(fontStyleController.getStatus().style);
                    $article.html(htmlStr);

//                    //添加滚动事件
//                    $(document).scroll(function () {
//                        var contentW = document.body.scrollWidth;
//                        var viewW = window.innerWidth;
//                        var scrollLeft = document.body.scrollLeft;
//
//                        console.log('contentW', contentW, 'viewW', viewW);
//                        console.log('scrollLeft', scrollLeft);
//
//                        if (contentW == viewW + scrollLeft) {
//                            console.log("本章阅读完毕");
//                        }
//                    });
                }
            });
        }

        return function () {
            $(function ($) {
                main();
            });
        };
    });

    //    加载html
    define("loadHtml", function (require) {
        var $ = require('Zepto');

        function loadHtml() {
            //加载菜单
            $("#menu-container").load("../ArticleMenu.html");
        }

        return function () {
            $(function ($) {
                loadHtml();
            })
        }
    })

    //    添加事件
    define("addEvent", function (require) {
        var $ = require('Zepto');

        function addEvent() {

            $("#menu-container").tap(function () {
                $(this).hide();
            });
        }

        return function () {
            $(function ($) {
                addEvent();
            })
        }
    })

    require(['main', 'loadHtml', 'addEvent', 'Swiper'], function (main, loadHtml, addEvent, Swiper) {
        main();
        loadHtml();
        addEvent();
        
        var aswiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: false,
//            nextButton: '.swiper-button-next',
//            prevButton: '.swiper-button-prev',
//            centeredSlides: true,
//            paginationClickable: true,
            autoHeight: true,
            observer: true,  // 修改 swiper 自己或子元素时，自动初始化 swiper
            observeParents: true,  // 修改 swiper 的父元素时，自动初始化 swiper
            onTap: function (swiper) {
                $("#menu-container").show();
            }
        });
    });
</script>
</body>
</html>